<template>
	<!--components/proList/proList.wxml-->
	<view>
		<view class="proList" :class="flag ? 'col_1': ''">
		  <view class="proItem" v-for="item of proList" :key="item.proid"
		   @click="toDetail(item.proid)">
		    <view class="itemImg">
		      <image :src="item.img1" class="image"></image>
		    </view>
		    <view class="itemInfo">
		      <view class="itemTitle">{{ item.proname }}</view>
		      <view class="itemPrice">¥{{ item.originprice }}</view>
		    </view>
		  </view>
		  <!-- <view class="proItem">
		    <view class="itemImg">
		      <image src="" class="image"></image>
		    </view>
		    <view class="itemInfo">
		      <view class="itemTitle">产品名称</view>
		      <view class="itemPrice">¥199.99</view>
		    </view>
		  </view>
		  <view class="proItem">
		    <view class="itemImg">
		      <image src="" class="image"></image>
		    </view>
		    <view class="itemInfo">
		      <view class="itemTitle">产品名称</view>
		      <view class="itemPrice">¥199.99</view>
		    </view>
		  </view>
		  <view class="proItem">
		    <view class="itemImg">
		      <image src="" class="image"></image>
		    </view>
		    <view class="itemInfo">
		      <view class="itemTitle">产品名称</view>
		      <view class="itemPrice">¥199.99</view>
		    </view>
		  </view> -->
		</view>
		<view class="iconbox">
		  <image @click="changeView" v-if="flag" src="../../static/resources/icon/list1.png" class="icon"></image>
		  <image @click="changeView" v-else src="../../static/resources/icon/list2.png" class="icon"></image>
		</view>
	</view>
		
	
</template>

<script>
	export default {
		props: {
			proList: Array
		},
		name:"ProList",
		data() {
			return {
				flag: true
			};
		},
		methods: {
			changeView () {
				this.flag = !this.flag
			},
			toDetail (proid) {
				uni.navigateTo({
					url: '/pages/detail/detail?proid=' + proid
				})
			}
		}
	}
</script>

<style lang="scss">
/* components/proList/proList.wxss */
.proList { display: flex; flex-wrap: wrap;}
.proList .proItem{ margin: 10px 0.5%; width: 48%; height: 300px;border: 1rpx solid #000}
.proList .proItem .itemImg{ height: 160px; width: 100%; background-color: #efefef;}
.proList .proItem .itemImg .image{ width: 100%; height: 100%; background-color: pink;}
.proList .proItem .itemInfo {height: 140px; }
.proList .proItem .itemInfo .itemTitle{}
.proList .proItem .itemInfo .itemPrice{}

.proList.col_1 .proItem { width: 100%;height: 120px;display: flex;}
.proList.col_1 .proItem .itemImg{ width: 120px;height: 120px;}
.proList.col_1 .proItem .itemInfo{ height: 120px;flex:1}

.iconbox {
  position: fixed;
  bottom: 60px;
  /* #ifdef H5 */
  bottom: 100px;
  /* #endif */
  
  right: 10px;
  width: 36px;
  height: 36px;
  background-color: #fff;
  border-radius: 50%;
}
.icon {
  position: fixed;
  bottom: 60px;
  /* #ifdef H5 */
  bottom: 100px;
  /* #endif */
  right: 10px;
  width: 36px;
  height: 36px;
}
</style>
